<template>
  <view class="container">
    <view v-if="backloglist.length > 0" class="backlog">
      <view v-for="(item, index) in backloglist" :key="index" class="backlog_list">
        <view class="backlog_top">
          <view class="backlog_top_left">
            <image src="../static/ico_shuiku.png" alt="">
            <view>待办事项</view>
          </view>
          <div class="backlog_top_right">
            <!-- <view @click="toDetail()">查看详情 ></view> -->
          </div>
        </view>
        <view class="backlog_bot">
          <view class="backlog_bot_list">
            <view>事项类型</view>
            <view>{{ item.title }}</view>
          </view>
          <view class="backlog_bot_list">
            <view>截止时间</view>
            <view>{{ item.dueDate }}</view>
          </view>
          <view class="backlog_bot_list">
            <view>事件状态</view>
            <view>{{ item.status }}</view>
          </view>
        </view>
      </view>
    </view>

    <view v-else class="empty">
      <image src="/pagesA/static/empty.png" mode="widthFix" />
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        backloglist: [],
      }
    },
    onLoad(options) {
      this.getlist()
    },
    methods: {
      getlist() {
        this.$request.getbacklist().then(res => {
          this.backloglist = res.rows || []
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .backlog {
    margin: 0 25rpx;
    padding: 25rpx 0;

    .backlog_list {
      background-color: #fff;
      border-radius: 20rpx;
      box-shadow: 0 0 5px rgba($color: #000000, $alpha: 0.2);
      position: relative;
      z-index: 1;
      margin-bottom: 25rpx;

      .backlog_top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20rpx 40rpx;
        border-bottom: 1px solid #f3f3f3;

        .backlog_top_left {
          display: flex;
          align-items: center;

          image {
            width: 25rpx;
            height: 25rpx;
            margin-right: 15rpx;
          }

          view {
            font-size: 30rpx;
            line-height: 30rpx;
          }
        }

        .backlog_top_right {
          font-size: 28rpx;
          line-height: 28rpx;
          color: #999;
        }
      }

      .backlog_bot {
        padding: 10rpx 50rpx 10rpx 60rpx;

        .backlog_bot_list {
          display: flex;
          align-items: center;
          justify-content: space-between;

          view {
            font-size: 28rpx;
            line-height: 28rpx;
            padding: 10rpx 0;

            &:nth-child(2) {
              text-align: right;
              color: #989898;
            }
          }
        }
      }

      .backlog_start {
        position: absolute;
        bottom: 10rpx;
        right: 50rpx;
        z-index: -1;

        image {
          width: 160rpx;
          height: 135rpx;
          opacity: 0.5;
        }
      }
    }
  }

  .empty {
    width: 100vw;
    height: 100vh;
    text-align: center;
    margin: 0 auto;

    image {
      width: 80%;
      margin-top: 20vh;
    }
  }
</style>
